<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
	</head>
	<body>
		<div id="app">
			<p>{{name}}</p>
			<p v-for="item in book">{{item}}</p>
		
		</br>
		
		<!-- id输入框、书籍名称输入框、价格输入框、出版社输入框、作者输入框 -->
		id输: <input type="text" name="id" /> <br />
		书籍名称: <input type="text" name="name" /><br />
		价格: <input type="text" name="price" /> <br />
		出版社: <input type="text" name="chuban" /> <br />
		作者: <input type="text" name="author" /> <br />
		<input type="submit"  value="提交" v-on:click="btn()"/>
		
		</div>
		<script>
			let app =new Vue({
				el:"#app",
				data:{
					name:"书籍列表:",
					book: [
						"id、 书籍名称、价格、出版社、作者",
						"001、JAVA高级编程、100、铁道部出版社、张三",
						"002、SQLSERVER高级编程、150、清华出版社、李四",
						"003、JAVA基础入门、50、铁道部出版社、张三",
						"004、ORACLE高级编程、120、清华出版社、王五"
					],
					
					message:[
						{id:'001',name:'JAVA高级编程',price:'100',chuban:'铁道部出版社',zz:'张三'},
						{id:'002',name:'SQLSERVER高级编程',price:'150',chuban:'清华出版社',zz:'李四'},
						{id:'003',name:'JAVA基础入门',price:'50',chuban:'铁道部出版社',zz:'张三'},
						{id:'004',name:'ORACLE高级编程',price:'120',chuban:'清华出版社',zz:'王五'}
					],
					id:'',
					name:'',
					price:'',
					chuban:'',
					author:''
				},
				methods:{
					//添加数据
					btn:function(){
						this.message.push({
							id:this.id,
							name:this.name,
							price:this.pirce,
							chuban:this.chuban,
							author:this.author
						})
					},
				}
			});
		</script>
	</body>
</html>

						